<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 后台管理系统</title>
    <script src="/static/js/jquery-3.4.1.min.js"></script>
    <script src="/static/layui/layui.js"></script>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
</head>

<style>
    :root {
        --primary-color: #4361ee;
        --secondary-color: #3f37c9;
        --accent-color: #4895ef;
        --light-color: #f8f9fa;
        --dark-color: #212529;
        --success-color: #4cc9f0;
        --error-color: #f72585;
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: 'Noto Sans SC', sans-serif;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        background: url("/static/images/main-back.png") no-repeat center center fixed;
        background-size: cover;
        color: var(--dark-color);
        position: relative;
        overflow-x: hidden;
    }

    /* 背景遮罩增强可读性 */
    body::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 0;
    }

    /* 头部样式 */
    .header {
        background-color: rgba(32, 102, 206, 0.9);
        height: 70px;
        padding: 0 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        position: relative;
        z-index: 10;
        backdrop-filter: blur(5px);
    }

    .logo-container {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .logo {
        height: 40px;
        transition: transform 0.3s ease;
    }

    .logo:hover {
        transform: scale(1.1);
    }

    .title {
        color: var(--light-color);
        font-size: 18px;
        font-weight: 500;
        letter-spacing: 0.5px;
        text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }

    /* 登录容器 */
    .login-wrapper {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 40px 20px;
        position: relative;
        z-index: 1;
    }

    .login-container {
        background: rgba(255, 255, 255, 0.97);
        border-radius: 16px;
        width: 100%;
        max-width: 450px;
        padding: 50px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        transform-style: preserve-3d;
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,0.2);
    }

    .login-container::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(
                to bottom right,
                rgba(67, 97, 238, 0.1),
                rgba(67, 97, 238, 0.3)
        );
        transform: rotate(30deg);
        z-index: -1;
        transition: all 0.6s ease;
    }

    .login-container:hover {
        transform: translateY(-5px);
        box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.3);
    }

    .login-container:hover::before {
        transform: rotate(45deg);
    }

    .login-title {
        text-align: center;
        font-size: 28px;
        color: var(--primary-color);
        margin-bottom: 40px;
        font-weight: 700;
        position: relative;
    }

    .login-title::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 3px;
        background: var(--accent-color);
        border-radius: 3px;
    }

    /* 表单样式 */
    .layui-form-item {
        margin-bottom: 25px;
    }

    .layui-form-label {
        width: 80px !important;
        padding: 11px 5px !important;
        font-size: 15px;
        color: var(--dark-color);
    }

    .layui-input-block {
        margin-left: 80px !important;
    }

    .layui-input {
        height: 42px !important;
        border-radius: 8px !important;
        border: 1px solid #e6e6e6 !important;
        padding-left: 15px !important;
        font-size: 15px;
        transition: all 0.3s ease;
    }

    .layui-input:focus {
        border-color: var(--accent-color) !important;
        box-shadow: 0 0 0 3px rgba(72, 149, 239, 0.2) !important;
    }

    /* 按钮样式 */
    .btn-container {
        display: flex;
        justify-content: space-between;
        margin-top: 30px;
        gap: 15px;
    }

    .login-btn {
        flex: 1;
        height: 46px !important;
        line-height: 46px !important;
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
        border: none !important;
        border-radius: 8px !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        letter-spacing: 1px;
        transition: all 0.3s ease !important;
        position: relative;
        overflow: hidden;
    }

    .login-btn::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: all 0.6s ease;
    }

    .login-btn:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 10px 20px -5px rgba(67, 97, 238, 0.4) !important;
    }

    .login-btn:hover::after {
        left: 100%;
    }

    .reset-btn {
        flex: 1;
        height: 46px !important;
        line-height: 46px !important;
        background: var(--light-color) !important;
        color: var(--dark-color) !important;
        border: 1px solid #e6e6e6 !important;
        border-radius: 8px !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        transition: all 0.3s ease !important;
    }

    .reset-btn:hover {
        background: #f1f1f1 !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.1) !important;
    }

    /* 页脚样式 */
    .footer {
        text-align: center;
        color: rgba(255, 255, 255, 0.9);
        padding: 20px;
        font-size: 14px;
        position: relative;
        z-index: 10;
        backdrop-filter: blur(5px);
        background: rgba(0, 0, 0, 0.1);
        text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
        .login-container {
            padding: 30px;
            margin: 20px;
        }

        .header {
            padding: 0 15px;
        }

        .title {
            font-size: 16px;
        }
    }

    /* 动画效果 */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .animate-fadeInUp {
        animation: fadeInUp 0.6s ease forwards;
    }

    /* 社交登录选项 */
    .social-login {
        margin-top: 30px;
        text-align: center;
    }

    .social-title {
        position: relative;
        margin-bottom: 20px;
        color: #999;
        font-size: 14px;
    }

    .social-title::before,
    .social-title::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 30%;
        height: 1px;
        background: #eee;
    }

    .social-title::before {
        left: 0;
    }

    .social-title::after {
        right: 0;
    }

    .social-icons {
        display: flex;
        justify-content: center;
        gap: 15px;
    }

    .social-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f5f5f5;
        color: #666;
        transition: all 0.3s ease;
    }

    .social-icon:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    /* 忘记密码链接 */
    .forgot-password {
        text-align: right;
        margin-top: 10px;
    }

    .forgot-password a {
        color: #666;
        font-size: 13px;
        transition: color 0.3s ease;
    }

    .forgot-password a:hover {
        color: var(--primary-color);
        text-decoration: underline;
    }
</style>

<body>
<!-- 头部导航 -->
<div class="header animate__animated animate__fadeInDown">
    <div class="logo-container">
        <img src="/static/images/logos/diandian-logo2.jpg" class="logo" alt="Logo">
        <div class="title">企业后台管理系统</div>
    </div>

    <ul class="layui-nav" style="background: transparent;">
        <li class="layui-nav-item">
            <a href="javascript:;">
                <img src="/static/images/icons/diandian-icon.png" class="layui-nav-img" alt="User">
            </a>
            <dl class="layui-nav-child">
                <dd><a href="">基本资料</a></dd>
                <dd><a href="">更改密码</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a href="http://diandian2.cn" class="nav-item">点点OJ</a></li>
    </ul>
</div>

<!-- 登录表单 -->
<div class="login-wrapper">
    <div class="login-container animate__animated animate__fadeInUp">
        <h2 class="login-title">欢迎登录</h2>
        <div class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">帐号</label>
                <div class="layui-input-block">
                    <input type="text" id="username" required lay-verify="required" placeholder="请输入用户名/邮箱" autocomplete="username" class="layui-input" value="admin" onclick="this.select();">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" id="password" required lay-verify="required" placeholder="请输入密码" autocomplete="current-password" class="layui-input">
                </div>
                <div class="forgot-password">
                    <a href="/forgot-password">忘记密码?</a>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="btn-container">
                    <button class="layui-btn login-btn" id="login">登 录</button>
                    <button class="layui-btn reset-btn" id="reset">重 置</button>
                </div>
            </div>

            <div class="social-login">
                <div class="social-title">其他登录方式</div>
                <div class="social-icons">
                    <a href="#" class="social-icon" title="微信登录"><i class="layui-icon layui-icon-login-wechat"></i></a>
                    <a href="#" class="social-icon" title="QQ登录"><i class="layui-icon layui-icon-login-qq"></i></a>
                    <a href="#" class="social-icon" title="微博登录"><i class="layui-icon layui-icon-login-weibo"></i></a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 页脚 -->
<div class="footer animate__animated animate__fadeIn">
    © 2023 Copyright BruceYan. All Rights Reserved.
</div>

<script>
    // 登录功能
    doLogin = function() {
        layui.use(['layer', 'form'], function () {
            var layer = layui.layer;
            var form = layui.form;

            var username = $("#username").val();
            var password = $("#password").val();

            // 验证输入
            if (!username.trim()) {
                layer.tips('帐号不能为空', '#username', {
                    tips: [1, '#ff4757'],
                    time: 3000
                });
                $("#username").focus();
                return false;
            }

            if (!password.trim()) {
                layer.tips('密码不能为空', '#password', {
                    tips: [1, '#ff4757'],
                    time: 3000
                });
                $("#password").focus();
                return false;
            }

            // 显示加载中
            var loadIndex = layer.load(2, {
                shade: [0.3, '#fff']
            });

            // AJAX请求
            $.ajax({
                url: '/auths/login',
                method: 'post',
                data: {
                    username: username,
                    password: password
                },
                success: function (res) {
                    layer.close(loadIndex);

                    if (res.code == 200) {
                        // 登录成功动画
                        $('.login-container').addClass('animate__animated animate__zoomOut');

                        setTimeout(function() {
                            parent.window.location.href = "/index";
                        }, 500);
                    } else {
                        layer.msg(res.msg || '登录失败，请重试', {
                            icon: 2,
                            time: 2000
                        });
                    }
                },
                error: function() {
                    layer.close(loadIndex);
                    layer.msg('网络错误，请稍后重试', {
                        icon: 2,
                        time: 2000
                    });
                }
            });
        });
    }

    // 文档加载完成
    $(document).ready(function () {
        // 重置按钮
        $("#reset").click(function () {
            $("input[name='username']").val("");
            $("input[name='password']").val("");
            $("input[name='username']").focus();
        });

        // 登录按钮
        $("#login").click(function () {
            doLogin();
        });

        // 回车登录
        $(document).keyup(function (event) {
            if (event.keyCode == 13) {
                doLogin();
            }
        });

        // 输入框获取焦点时的动画
        $(".layui-input").focus(function() {
            $(this).parent().find(".layui-form-label").css("color", "var(--primary-color)");
        }).blur(function() {
            $(this).parent().find(".layui-form-label").css("color", "var(--dark-color)");
        });
    });
</script>
</body>
</html>
